<template>
	<view>
		<u-sticky offset-top="0" bgColor="#0165FB">
			<view :style="{height: statusHeight+'px'}"></view>
			<view class="seach_view" :style="{height: titleHeight+'px',width:menuRight+'px'}">
				<view class="seach_view_border flex" :style="{height:menuHeight+2+'px'}">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/seach_icon1.png" class="seach_view_border_icon" mode=""></image>
					<input type="text" @confirm="confirm" placeholder="请输入药品或药房名称" class="seach_view_border_input" v-model="keyword" placeholder-style="color: rgba(255, 255, 255, 0.80);" />
				</view>
			</view>
			<view style="height: 5px"></view>
			<view v-show="label_show">
				<view class="content_label_tc" :style="{top:allHeight+5+'px'}" >
					<view class="content_label_tc_yinying" :style="{top:allHeight+5+'px'}"></view>
					<view class="content_label_tc_view">
						<view class="content_label_tc_view_content">
							<view class="content_right_label_left_item"
								v-for="(item,index) in cateTwoList"
								@click="changeCate(item)"
								:class="{ 'active':item.id==tapTwo_id }"
								:key="index">
								{{item.name}}
							</view>
						</view>
						<view class="content_label_tc_view_icon" @click="yc_label">
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/shangjiaobiao.png" class="content_label_tc_view_icon_icon" mode=""></image>
						</view> 
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<scroll-view scroll-y="true" class="content_left" :style="{top:allHeight+20+'px'}">
				<view class="content_left_list_item"
					:class="tap_index == index?'actvie'
					:(tap_index-1 !=-1)&&(tap_index-1) == index?'choose_top'
					:(tap_index+1)&&(tap_index+1) == index?'choose_bottom'
					:''"  
					v-for="(item, index) in cateList" :key="index" @click="choose_tap(index, item)">
					{{ item.name||'' }}
				</view>
			</scroll-view>
			<view class="content_right">
				<swiper class="swiper" :autoplay="true">
					<swiper-item v-for="(item,index) in banners" :key="index">
						<image :src="ImgUrl + item.img" mode="" @click="go_PointsMall"></image>
					</swiper-item>
				</swiper>
				<u-sticky :offset-top="allHeight+5" bgColor="#fff" z-index="1">
					<view class="content_right_label">
						<scroll-view scroll-x="true" class="content_right_label_left">
							<view class="content_right_label_left_item"
								v-for="(item,index) in cateTwoList"
								@click="changeCate(item)"
								:class="{ 'active':item.id==tapTwo_id }"
								:key="index">
								{{item.name}}
							</view>
						</scroll-view>
						<view class="content_right_label_right" @click="show_label">
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/xiajiaobiao.png" class="content_right_label_right_img" mode=""></image>
						</view>
					</view>
				</u-sticky>
				<view class="content_right_list">
					<view class="list">
						<view class="content_right_list_view"
							v-for="(item,index) in list" :key="index" @click="go_detail(item.id)">
							<image :src="ImgUrl + item.img[0]" class="content_right_list_view_img" mode=""></image>
							<view class="content_right_list_view_text">
								{{item.name}}
							</view>
						</view>
					</view>
					<u-loadmore v-if="pages.page>pages.totalPage&&pages.totalPage" status="nomore" />
					<u-empty v-if="list.length == 0" text="暂无数据" mode="list"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { cate, shop_goods } from '../../api/common.js'
import {
		banner
	} from '@/api/login.js';
export default {
	data() {
		return {
			statusHeight:0,
			allHeight:0,
			titleHeight:0,
			menuRight:0,
			menuHeight:0,
			keyword:'',
			label_show:false,
			list: [],
			cateList: [],//一级分类
			tap_index:0,
			cateTwoList:[],//二级分类
			tapTwo_id:0,//二级分类id
			pages:{
				page:1,
				size:5,
				totalPage:null
			},
			banners:[],
		};
	},
	computed:{
		ImgUrl(){
			return this.$store.state.ImgUrl
		},
	},
	onLoad(){
		this.getCateList();
		this.getBanner();
	},
	onPullDownRefresh() {
		this.pages = {
			page:1,
			size:15,
			totalPage:null
		}
		Promise.all([this.getList()]).then(res => {
			uni.stopPullDownRefresh()
		})
	},
	// 下拉加载
	onReachBottom() {
		this.pages.page++
		const {page,totalPage} = this.pages
		if (page <= totalPage) {
			uni.showLoading({
				title: '请稍等'
			})
			this.getList()
		} else return
	},
	onReady() {
		this.$getNavbarHeight().then(({statusHeight, allHeight, titleHeight,menuRight,menuHeight})=>{
			this.statusHeight = statusHeight
			this.allHeight = allHeight
			this.titleHeight = titleHeight
			this.menuRight = menuRight
			this.menuHeight = menuHeight
		})
		
	},
	methods: {
		getBanner() {
			banner({
				to:'user_shop'
			}).then(res => {
				if (res.code === 200001) {
					this.banners = res.data.data;
				}
			}).catch(err => {
				console.log(err, '==err')
			})
		},
		confirm(){
			if(!this.keyword){
				uni.showToast({
					title: '请输入商品名称',
					icon: 'none'
				})
			}else{
				this.getList();
			}
		},
		getCateList(id){
			let params={}
			if(id){
				params.parent_id=id
			}
			cate(params).then(res=>{
				if(res.code == 200001){
					if(id){
						this.cateTwoList = res.data
						if(res.data.length > 0){
							this.tapTwo_id = res.data[0].id
							this.getList()
						}
					} else {
						this.cateList = res.data;
						this.cateList.push({name:'',id:''})
						this.getCateList(res.data[0].id)
					}
				}
			})
		},
		getList(){
			let params = {
				type_id: this.tapTwo_id,
				name: this.keyword,
				...this.pages
			}
			shop_goods(params).then(res=>{
				if(res.code == 200001){
					uni.hideLoading()
					if(res.code == 200001){
						let list = res.data.data
						this.list = this.pages.page == 1 ? list : this.list.concat(list)
						this.pages.totalPage = res.data.last_page
					} else {
						this.$showToast(res.message)
					}
				}
			})
		},
		choose_tap(index, item){
			if(this.tap_index == index) return
			if(!item.name) return
			this.tap_index = index;
			this.getCateList(item.id)
		},
		changeCate(item){//二级
			this.pages = {
				page:1,
				size:15,
				totalPage:null
			}
			if(this.tapTwo_id == item.id) return
			this.tapTwo_id = item.id;
			this.yc_label()
			this.getList()
		},
		yc_label(){
			this.label_show = false
		},
		show_label(){
			console.log('---')
			this.label_show = true
		},
		go_detail(id){
			uni.navigateTo({
				url:'/subPages/ShopingDetail/ShopingDetail?id=' + id
			})
		},
		go_PointsMall(){
			uni.navigateTo({
				url:'/pages/PointsMall/PointsMall'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.seach_view {
	height: 88rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #0165fb;
	display: flex;
	align-items: center;
}
.seach_view_border {
	width: 100%;
	border-radius: 32rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	padding: 0 30rpx;
	height: 66rpx;
	box-sizing: border-box;
}
.seach_view_border_icon {
	width: 44rpx;
	height: 44rpx;
}
.seach_view_border_input {
	width: calc(100% - 60rpx);
	color: #fff;
	font-family: Alibaba PuHuiTi 2;
	font-size: 26rpx;
	font-weight: 400;
}
.content {
	padding-top: 15px;
	padding-left: 176rpx;
}
.content_left {
	width: 176rpx;
	border-radius: 0rpx 20rpx 0rpx 0rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: #F4F5F9;
}
.content_left_list_item:first-child {
	border-top-right-radius: 20rpx;
}
.content_left_list_item {
	width: 176rpx;
	height: 110rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f9;
	color: #888;
	text-align: center;
	font-size: 26rpx;
	position: relative;
	z-index: 2;
}
.actvie{
	background-color: #fff;
	height: 150rpx;
	margin: -20rpx 0 -20rpx;
	z-index: 1;
	color: #333;
}
.choose_top{
	border-radius: 0rpx 0rpx 20rpx 0rpx;
}
.choose_bottom{
	border-radius: 0rpx 20rpx 0rpx 0rpx;
}
.content_right{
	width: 574rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
}
.swiper{
	width: 100%;
	height: 204rpx;
	border-radius: 30rpx;
}
.content_right_img{
	width:100%;
	height: 204rpx;
	border-radius: 30rpx;
}
.content_right_label{
	width: 100%;
	height: 58rpx;
	display: flex;
	align-items: center;
	margin-top: 30rpx;
	position: relative;
	&::after{
		content: '';
		background: linear-gradient(270deg, #FFF 25.68%, rgba(255, 255, 255, 0.00) 96.67%);
		position: absolute;
		right: 58rpx;
		top: 0;
		bottom: 0;
		width: 70rpx;
		z-index: 3;
	}
}
.content_right_label_left{
	width:calc(100% - 68rpx);
	height: 58rpx;
	white-space: nowrap;
}
.content_right_label_right{
	width: 68rpx;
	height: 68rpx;
}
.content_right_label_right_img{
	width: 58rpx;
	height: 58rpx;
	display: block;
	margin: 0 auto;
	margin-top: 5rpx;
}
.content_right_label_left_item{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	display: inline-flex;
	padding: 12rpx 24rpx;
	border-radius: 94rpx;
	background: #F4F5F9;
	margin-right: 20rpx;
	&.active{
		background: rgba(233, 75, 46, 0.1);
		color: #E94B2E;
	}
}
.content_label_tc{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}
.content_label_tc_yinying{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: #333;
	opacity: 0.6;
	z-index: 9999;
}
.content_label_tc_view{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #ffffff;
	z-index: 9999;
	padding: 30rpx;
	box-sizing: border-box;
	
}
.content_label_tc_view_icon{
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}
.content_label_tc_view_icon_icon{
	width: 58rpx;
	height: 58rpx;
}
.content_right_list{
	width: 100%;
	margin-top: 28rpx;
}
.list{
	display: grid;
	grid-template-columns: repeat(3, 150rpx);
	grid-gap: 30rpx 30rpx;
}
.content_right_list_view{
	width: 150rpx;
	height: 150rpx;
}
.content_right_list_view_img{
	width: 108rpx;
	height: 108rpx;
	display: block;
	margin: 0 auto;
	background-color: #888;
	border-radius: 16rpx;
}
.content_right_list_view_text{
	color: #666;
	text-align: center;
	font-family: Alibaba PuHuiTi;
	font-size: 24rpx;
	font-weight: 400;
	text-align: center;
	margin-top: 20rpx;
}
</style>
